<template>
  <div class="source-wrap scene-edit-box">
	  
	  <div class="top-title">
			<span>用户列表</span>
			<div>
				<input type="text"  v-model="keywords" placeholder="请输入名称检索" @keydown="handleSearch"/>
			</div> 
	  </div>
	  
	  <div class="source-box" style="width: calc(100% - 0px);">
		<div class="list-wrap">
			<div class="float scroll min" style="height: 100%;">
				<el-table
				  :v-loading="loading"
				  :data="tableData"
				  style="width: 100%; margin-bottom: 20px"
				  row-key="id"
				  
				  default-expand-all
				>
					<el-table-column align="left" prop="username" label="账号"  />
					<el-table-column align="left" prop="name" label="姓名"  />
					<el-table-column align="left" prop="phone" label="注册手机号"  />
					
					<el-table-column align="left" label="操作">
						<template #header>
							<el-button v-hasPerm="['admin:add']" type="primary" plain link :icon="Plus"  @click.stop="openDialog(null,'add')">主账号</el-button>
						</template>
					  <template #default="scope">
						  
							<el-tooltip
							  class="box-item"
							  effect="dark"
							  content="新增子账号"
							  placement="top"
							>
								<el-button
								  v-show="scope.row.pid=='-1' && scope.row.username!='administrator' "
								  type="primary"
								  link
								  size="small"
								  @click.stop="openDialog(scope.row,'add')"
								>
								  <i-ep-plus />
								</el-button>
							</el-tooltip>
							
							<el-tooltip
							  class="box-item"
							  effect="dark"
							  content="编辑"
							  placement="top"
							>
								<el-button
								  v-show="scope.row.username!='administrator' "
								  type="primary"
								  link
								  size="small"
								  @click.stop="openDialog(scope.row,'edit')"
								>
								  <i-ep-edit />
								</el-button>
							</el-tooltip>
							
							<el-tooltip
							  class="box-item"
							  effect="dark"
							  content="重置密码(rs@123)"
							  placement="top"
							>
								<el-button
								  v-show="scope.row.username!='administrator' "
								  type="primary"
								  link
								  size="small"
								  @click.stop="handleResetPwd(scope.row)"
								>
								  <i-ep-lock />
								</el-button>
							</el-tooltip>
							
							<el-tooltip
							  class="box-item"
							  effect="dark"
							  content="指定GPU资源"
							  placement="top"
							>
								<el-button
								  v-show="scope.row.roleMark=='group'  || scope.row.roleMark=='admin' "
								  type="primary"
								  link
								  size="small"
								  @click.stop="accreditDialog.openDialog(scope.row)"
								>
								  <i-ep-operation />
								</el-button>
							</el-tooltip>
							
							<el-tooltip
							  class="box-item"
							  effect="dark"
							  content="删除"
							  placement="top"
							>
								<el-button
								  v-show="scope.row.username!='administrator' "
								  type="primary"
								  link
								  size="small"
								   @click.stop="handleDelete(scope.row)"
								  ><i-ep-delete />
								</el-button>
							</el-tooltip>
					  </template>
					</el-table-column>
				</el-table>
			</div>
		</div>	
	</div>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  append-to-body
	  width="750px"
	  @close="closeDialog"
	>
	
	
	<el-form
	  ref="userFormRef"
	  :model="userFormData"
	  :rules="userFormRules"
	  label-width="100px"
	>
		<el-form-item label="姓名" prop="name">
		  <el-input v-model="userFormData.name" placeholder="请输入姓名" />
		</el-form-item>
		
		<el-form-item label="账号" prop="username">
		  <el-input v-model="userFormData.username" placeholder="请输入账号" />
		</el-form-item>
		
		<el-form-item label="手机号" prop="phone">
		  <el-input v-model="userFormData.phone" placeholder="手机号" />
		</el-form-item>
	</el-form>

	<template #footer>
	  <div class="dialog-footer">
	    <el-button type="primary" @click="submitForm"  :loading="loading">确 定</el-button>
	    <el-button @click="closeDialog" :loading="loading">取 消</el-button>
	  </div>
	</template>

	</el-dialog>
	
	<AccreditDialog ref="accreditDialog"></AccreditDialog>
  </div>
</template>
<script lang="ts" setup>
	import AccreditDialog from "./components/AccreditDialog.vue";
	import { reactive, ref } from 'vue'
	import type {FormRules } from 'element-plus'
 	import {
	  Plus
	} from '@element-plus/icons-vue' 
	
	
	import { listForUser ,saveForUser,deleteForUser,resetPwdForUser} from "@/api/user";
	const tableData=ref([]);
	const keywords=ref('');
	const accreditDialog=ref();
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const userFormRef=ref();
	
	const userFormRules=reactive<FormRules>({
	  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
	  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
	  phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
	});
	
	const userFormData=reactive<Object>({
		id:'',
		pid:'',
		username:'',
		name:'',
		phone:'',
	})
	
	const load=()=>{
		loading.value=true;
		listForUser({
			name:keywords.value
		})
		.then(({result}) => {
			tableData.value=result
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleSearch=(e)=>{
		if(e.keyCode == 13) {
			load();
		}
	}
	
	
	const openDialog=(row:object,type:string)=>{
		if('add'==type){
			dialog.value.visible=true;
			dialog.value.title='新增';
			Object.assign(userFormData, {pid:row?row.id:'-1'});
		}else{
			dialog.value.visible=true;
			dialog.value.title='编辑';
			Object.assign(userFormData,{
				id:row.id,
				pid:row.pid,
				username:row.username,
				name:row.name,
				phone:row.phone,
			});
		}
	}
	
	const handleDelete=(row :object)=>{
		ElMessageBox.confirm("确认删除["+row.name+"]用户吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  
			  loading.value=true;
			  deleteForUser({
			  	id:row.id
			  })
			  .then(() => {
				load();
				ElMessage.success("成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("取消"));
	}
	
	const handleResetPwd=(row :object)=>{
		ElMessageBox.confirm("确认重置["+row.name+"]密码吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  resetPwdForUser({
			  	id:row.id
			  })
			  .then(() => {
				load();
				ElMessage.success("成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("取消"));
	}
	
	
	
	const submitForm=()=>{
		userFormRef.value.validate((isValid: boolean) => {
		  if (isValid) {
				loading.value=true;
				saveForUser(userFormData)
				.then((res) => {
					load();
					ElMessage.success(res.message);
					closeDialog();
				})
				.catch((e) => {
				})
				.finally(() => {
					loading.value=false;
				});
		  }
		});
	}
	
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
	  userFormRef.value.resetFields();
	  userFormRef.value.clearValidate();
	
	  userFormData.id = "";
	  userFormData.pid = "";
	  userFormData.name= "";
	  userFormData.username= "";
	  userFormData.phone = "";
	}
	
	onMounted(() => {
		load();
	});
	
	
</script>
<style scoped>
	:deep(.el-table--enable-row-transition .el-table__body td.el-table__cell){
		background-color: transparent !important;
	}
</style>